<script setup lang="ts">
import ContainerComponent from './components/ContainerComponent.vue'
</script>

<template>
  <header class="grid grid-cols-3 w-full justify-center items-center p-4 shadow-md mb-8">
    <div class="justify-self-start flex items-center space-x-2 text-indigo-900">
      <h1>WayTale</h1>
    </div>
    <div class="w-full flex space-x-4 justify-center"></div>
  </header>

  <main class="px-8">
    <ContainerComponent :isVertical="false">
      <div
        class="overflow-hidden mb-4 mr-4 text-center bg-white rounded shadow-md text-slate-500 shadow-slate-200"
      >
        <figure class="p-6 pb-0">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-12 h-12 mx-auto stroke-violet-500"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="1"
            role="graphics-symbol"
            aria-labelledby="title-01 desc-01"
          >
            <title id="title-01">Icon title</title>
            <desc id="desc-01">A more detailed description of the icon</desc>
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"
            />
          </svg>
        </figure>

        <div class="p-6">
          <h3 class="mb-4 text-xl font-medium text-slate-700">A</h3>
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex tempora libero nostrum
            impedit unde delectus, aliquid consequatur tenetur earum totam atque, repudiandae sequi
            beatae fuga a tempore. Libero, voluptatem earum.
          </p>
        </div>
      </div>
      <div
        class="overflow-hidden mb-4 mr-4 text-center bg-white rounded shadow-md text-slate-500 shadow-slate-200"
      >
        <figure class="p-6 pb-0">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-12 h-12 mx-auto stroke-violet-500"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="1"
            role="graphics-symbol"
            aria-labelledby="title-01 desc-01"
          >
            <title id="title-01">Icon title</title>
            <desc id="desc-01">A more detailed description of the icon</desc>
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"
            />
          </svg>
        </figure>
        <div class="p-6">
          <h3 class="mb-4 text-xl font-medium text-slate-700">B</h3>
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex tempora libero nostrum
            impedit unde delectus, aliquid consequatur tenetur earum totam atque, repudiandae sequi
            beatae fuga a tempore. Libero, voluptatem earum.
          </p>
        </div>
      </div>
      <div
        class="overflow-hidden mb-4 text-center bg-white rounded shadow-md text-slate-500 shadow-slate-200"
      >
        <figure class="p-6 pb-0">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-12 h-12 mx-auto stroke-violet-500"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="1"
            role="graphics-symbol"
            aria-labelledby="title-01 desc-01"
          >
            <title id="title-01">Icon title</title>
            <desc id="desc-01">A more detailed description of the icon</desc>
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"
            />
          </svg>
        </figure>
        <div class="p-6">
          <h3 class="mb-4 text-xl font-medium text-slate-700">C</h3>
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex tempora libero nostrum
            impedit unde delectus, aliquid consequatur tenetur earum totam atque, repudiandae sequi
            beatae fuga a tempore. Libero, voluptatem earum.
          </p>
        </div>
      </div>
    </ContainerComponent>
  </main>
</template>
